<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="element-plus/index.css" />
		<script src="js/vue.js"></script>
		<script src="element-plus/index.full.js"></script>
	</head>
	<body>
		<div id='app'>
			<el-card style="max-width: 500px;margin: 50px auto;">
				<el-form ref="form" label-width='100' :model="formData" :rules="rules">
					<!-- 姓名不能为空 -->
					<el-form-item label='学生姓名' prop="name">
						<el-input v-model="formData.name"></el-input>
					</el-form-item>
					<!-- 班级不能为空 -->
					<el-form-item label='班级' prop="class">
						<el-input v-model="formData.class"></el-input>
					</el-form-item>
					<!-- 11位数字 -->
					<el-form-item label='联系方式' prop="phone">
						<el-input v-model="formData.phone"></el-input>
					</el-form-item>
					<!-- 性别不能为空 -->
					<el-form-item label='性别' prop="gender">
						<el-radio-group v-model="formData.gender">
							<el-radio :value="1">男</el-radio>
							<el-radio :value="2">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item>
						<el-button @click="post" type='primary'>添加学生</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						formData: {
							name: '',
							class: '',
							phone: '',
							gender: null,
						},
						rules: {
							name: [{
								required: true,
								message: '请输入学生姓名',
								trigger: 'blur'
							}],
							class: [{
								required: true,
								message: '请输入班级',
								trigger: 'blur'
							}],
							phone: [{
									required: true,
									message: '请输入联系方式',
									trigger: 'blur'
								},
								{
									pattern: /^[0-9]{11}$/,
									message: '请输入11位数字的联系方式',
									trigger: 'blur'
								}
							],
							gender: [{
								required: true,
								message: '请选择性别',
								trigger: 'change'
							}]
						}
					};
				},
				methods: {
					post() {
						this.$refs.form.validate((valid) => {
							if (valid) {
								// 校验通过，使用弹窗组件显示添加成功
								this.$message({
									type: 'success',
									message: '学生添加成功！'
								});
							} else {
								console.log('表单验证失败');
								return false;
							}
						});
					}
				}
			}).use(ElementPlus).mount('#app');
		</script>
	</body>
</html>